<template>
    <a-modal
        :title="tableTitle"
        :visible="visible"
        width="1200px"
        @ok="handleOk"
        :maskClosable="false"
        :confirmLoading="confirmLoading"
        @cancel="handleCancel"
    >

        <a-form-model ref="form" :model="form" :rules="rules">

            <a-descriptions bordered :column="2">
                <a-descriptions-item label="项目名称" :span="1">
                    <a-form-model-item
                        prop="projectName"
                        :rules="{
                            required: true,
                            message: '请输入项目名称',
                            trigger: 'change',
                        }">
                        <a-input :maxLength="100" placeholder="请输入项目名称"
                                 v-model="form.projectName"></a-input>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="所属项目体系" :span="1">
                    <a-form-model-item
                        prop="projectSystem"
                        :rules="{
                            required: true,
                            message: '请选择所属项目体系',
                            trigger: 'change',
                        }">
                        <a-select
                            v-model="form.projectSystem"
                            placeholder="请选择所属项目体系"
                            showSearch
                            allowClear>
                            <a-select-option :value="item2.codeMasterValue" :key="index2"
                                             v-for="(item2,index2) in ($store.getters.dictionary['POLICY_TECHNOLOGY_PROJECT_SYSTEM'])">
                                {{item2.codeMasterName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="项目开始月份" :span="1">
                    <a-form-model-item
                        prop="projectStartMonth"
                        :rules="{
                            required: true,
                            message: '请输入项目开始月份',
                            trigger: 'change',
                        }">
                        <a-input-number
                            :min="1"
                            :max="12"
                            placeholder="请输入项目开始月份"
                            v-model="form.projectStartMonth">
                        </a-input-number>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="项目结束月份" :span="1">
                    <a-form-model-item
                        prop="projectEndMonth"
                        :rules="{
                            required: true,
                            message: '请输入项目结束月份',
                            trigger: 'change',
                        }">
                        <a-input-number
                            :min="1"
                            :max="12"
                            placeholder="请输入项目结束月份"
                            v-model="form.projectEndMonth">
                        </a-input-number>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="区域" :span="1">
                    <a-form-model-item
                        prop="policyAreaCode"
                        :rules="{
                            required: true,
                            message: '请选择区域',
                            trigger: 'change',
                        }">
                        <a-select
                            v-model="form.policyAreaCode"
                            placeholder="请选择区域"
                            showSearch
                            allowClear>
                            <a-select-option :value="item2.codeMasterValue" :key="index2"
                                             v-for="(item2,index2) in ($store.getters.dictionary['PUBLISH_AREA'])">
                                {{item2.codeMasterName}}
                            </a-select-option>
                        </a-select>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="申报地址" :span="1">
                    <a-form-model-item
                        prop="declareUrl"
                        :rules="{
                            required: true,
                            message: '请输入项目申报地址',
                            trigger: 'change',
                        }">
                        <a-input :maxLength="100" placeholder="项目申报地址"
                                 v-model="form.declareUrl"></a-input>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="是否需要推荐函" :span="2">
                    <a-form-model-item
                        prop="needRecommendation"
                        :rules="{
                            required: true,
                            message: '请选择是否需要推荐函',
                            trigger: 'change',
                        }">
                        <a-radio-group v-model="form.needRecommendation">
                            <a-radio :value="0" :key="0">需要</a-radio>
                            <a-radio :value="1" :key="1">不需要</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="负责部门" :span="1">
                    <a-form-model-item
                        prop="responsibleDepartment"
                        :rules="{
                            required: true,
                            message: '请输入负责部门',
                            trigger: 'change',
                        }">
                        <a-input :maxLength="100" placeholder="请输入负责部门"
                                 v-model="form.responsibleDepartment"></a-input>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="负责人" :span="1">
                    <a-form-model-item
                        prop="responsiblePerson"
                        :rules="{
                            required: true,
                            message: '请输入负责人',
                            trigger: 'change',
                        }">
                        <a-input :maxLength="100" placeholder="请输入负责人"
                                 v-model="form.responsiblePerson"></a-input>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="联系电话" :span="1">
                    <a-form-model-item
                        prop="contactNumber"
                        :rules="{
                            required: true,
                            message: '请输入联系电话',
                            trigger: 'change',
                        }">
                        <a-input :maxLength="100" placeholder="请输入联系电话"
                                 v-model="form.contactNumber"></a-input>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="发布时间" :span="1">
                    <a-form-model-item
                        prop="publishDateTime"
                        :rules="{
                            required: true,
                            message: '请选择发布时间',
                            trigger: 'change',
                        }">
                        <xlDate
                            placeholder="发布时间"
                            dataType="dateTime"
                            v-model="form.publishDateTime">
                        </xlDate>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="详细介绍" :span="2">
                    <a-form-model-item
                        prop="detail"
                        :rules="{
                            required: true,
                            message: '请输入详细介绍',
                            trigger: 'change',
                        }">
                        <editor
                                v-model="form.detail">
                        </editor>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="宣传图片" :span="2">
                    <a-form-model-item>
                        <xlImages
                            v-model="form.projectImgUrl"
                            name="file"
                            accept=".jpg, .jpeg, .png"
                            :max="1"
                        >
                        </xlImages>
                    </a-form-model-item>
                </a-descriptions-item>

                <a-descriptions-item label="附件" :span="2">
                    <a-form-model-item>
                        <a-upload
                                @change="onChange"
                                name="file"
                                action="/system/api/upload/file"
                                :accept="accept"
                                :beforeUpload="beforeUpload"
                                :file-list="fileLists"
                        >
                            <a-button :disabled="$attrs.disabled || false">
                                <a-icon type="upload"/>
                                上传文件
                            </a-button>
                            <span style="font-size: 10px;color: #818181;"><br/>
                                文件大小: {{ (size / 1024 / 1024) + 'M' }}<br/>
                                支持格式: {{ accept }}
                            </span>
                        </a-upload>
                    </a-form-model-item>
                </a-descriptions-item>

            </a-descriptions>

        </a-form-model>
    </a-modal>
</template>

<script>
import editor from '@/components/ueditor'
import {removePolicyAttachment} from '@/assets/api/policy'
import xlDate from '@/components/formUntil/xlDate'
import xlImages from '@/components/formUntil/xlImages'
export default {
    name: "xlForm",
    data(){
        return {
            tableTitle: '新增',
            confirmLoading: false,
            fileLists: [],
            size: 10485760,
            accept: '.pdf,.docx,.doc,.xls,.xlsx,.zip',
            form: {},
            formData: {},
            rules: {},
            visible: false,
            type: 1
        }
    },
    components: {
        editor,
        xlDate,
        xlImages
    },
    methods:{
        handleOk() {
            this.form.policyAreaName = this.$store.getters.dictionary['PUBLISH_AREA']
                .filter(item => item.codeMasterValue == this.form.policyAreaCode)[0]?.codeMasterName
            this.form.policyAttachments = this.fileLists.map(item => {
                return {
                    fileName: item?.name || item?.response?.result?.fileName || null,
                    filePath: item?.url || item?.response?.result?.path || null,
                    id: item.id || null
                }
            })
            this.$refs.form.validate(async (valid, value) => {
                if (valid) {
                    this.confirmLoading = true
                    await this.$emit('handleOk', this.form)
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        handleCancel() {
            this.visible = false
        },
        formatData() {
        },
        formatForm(form) {
            delete form.createDateTime
            delete form.modifyDateTime
            delete form.modifyBy
            delete form.createBy
            this.fileLists = []
            //整理字段数据 ／ 赋值 清空等
            this.form = Object.assign({}, form)
            if (this.form.policyAttachments) {
                this.fileLists = this.form.policyAttachments.map(item => {
                    return {
                        uid: item.id,
                        id: item.id,
                        name: item.fileName,
                        status: 'done',
                        url: item.filePath
                    }
                })
            }
        },
        beforeUpload(e, file) {
            if(e.size > this.size){
                file.splice(file.length - 1)
                this.$message.error('文件大小超出限制')
                return false
            }
            let fileAccept = e.name.split('.').pop()
            let accept = this.accept.slice(1).split(',.')
            if(accept.indexOf(fileAccept) == -1){
                file.splice(file.length - 1)
                this.$message.error('文件格式错误')
                return false
            }

        },
        onChange(info) {
            this.fileLists = info.fileList
            if (info.file.status === 'removed' && info.file.id) {
                removePolicyAttachment({param: info.file.id}).then(_ => {
                    this.$message.success(`${info.file.name} 删除成功`)
                })
            }
            if (info.file.status === 'done') {
                this.$message.success(`${info.file.name} 上传成功`)
            } else if (info.file.status === 'error') {
                this.$message.error(`${info.file.name} 上传失败`)
            }
        }
    },
}
</script>

<style scoped lang="less">
/deep/ .ant-form-item {
    margin: 0;
}

/deep/ .ant-input-number {
    width: 100%;
}

.xl-dateRange {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
</style>